<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      border: 5px solid red;
    }

    span {
      width: 200px;
      height: 200px;
      border: 5px solid red;
      /*行内元素：不可以设置宽高，按照书写次序横着排*/
      display: inline;
      /*可以根据需求切换元素的显示模式*/
      display: block;
    }
    input,button{
      width: 100px;
      height: 100px;
      background-color: pink;
      /*显示模式：行内块 既能像块元素那样设置宽高，又能像行元素那样横着排*/
      display: inline-block;
    }
    /*文档流：指的是页面上的多个元素按照自己本身 的特性进行有序排列
      块级元素竖着排，行内行内块元素横着排，元素之间没有堆叠，依次排列*/
    .d2:hover{
      /*元素消失：脱离文档流，释放自己占用的页面布局空间*/
      display: none;
    }
  </style>
</head>
<body>
  <div class="d1">111</div>
  <div class="d2">222</div>
  <div class="d3">333</div>
  <hr>
  <span>1234567890</span>
  <span>1234567890</span>
  <span>1234567890</span>
  <hr>
  <input type="text">
  <input type="text">
  <button>按钮</button>
</body>
</html>